<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>pushState</title>
</head>
<body>
<a href="#a">#a</a>
<a href="#b">#b</a>
<script>
  window.addEventListener('popstate',(event)=>{
    console.log('event:', event);
    console.log('event.state:', event.state);
    console.log('event.type:', event.type);
  })

  setTimeout(()=>{
    const state = { 'page_id': 1, 'user_id': 5 } // 640k限制 超过会报错
    const title = '' // ←这个参数没有用 各大浏览器都不支持
    const url = 'hello-world.html'
    /*↑
     *当前浏览器的url栏里的url会被替换为这个
     * 注意:
     * + 可以是绝对路径 /abc.html
     * + 也可以是当前这种 abc.html 相对路径
     * + 如果没有指定 则为当前的url
     * + todo 新的url和旧的url必须同源(否则会报错
    * */

    history.pushState(state, title, url);
    /*↑
    * 假设你访问的页面是 http://xxx/index.html 运行完上面这一行脚本后
    * url栏地址会变为 http://xxx/hello-world.html,
    * 是的, 会改变url栏中的url,
    * 但是需要注意 只是改变了这个url, 但并没有跳转至这个url(也就是说没有真正访问这个url对应的资源)
    * 另外 我们还往历史记录栈里加了一层
    *   + todo 但是并不会触发popState事件
    *   + 浏览器后退按钮也是无效的*/

    console.log(history.length); //2
    /*↑
     *说明是同步方法 不像.back() .forward() .go()是异步方法
     * So 这也是为什么popState事件没有触发的原因
     * popState存在的理由 本来就是为了监听 back、forward、go 这三个异步方法
     * 另外用户点击浏览器的
     * + 前进后退按钮
     * + 页面内锚点连接 <a href="#abc">
     * 注意如果不是页面内跳转 那么本页面的popstate事件监听是无效的
    * */

    console.log(history);
    /*
History
length: 2
scrollRestoration: "auto"
state:
  page_id: 1
  user_id: 5
  __proto__: Object
__proto__: History
*/
  },100)

</script>
</body>
</html>
